<template>
	<div class="user-info">

		<!-- 自定义顶部导航栏 -->
		<HeaderImage></HeaderImage>

		<div class="info " :style="{backgroundColor:bgColor}">
			<div style="border: 2px solid #fff;width: 130rpx;height:130rpx;border-radius: 50%;"
				@click="userAvatarChange">
				<!-- <img :src="userInfo.UserAvatarURL?" /> -->
				<image v-if="UserInfo.UserInfo.UserAvatarURL" :src="UserInfo.UserInfo.UserAvatarURL"
					style="width: 100%;height: 100%;border-radius: 50%;" />
				<image v-else src="../../assets/yuangongDef.jpg" style="width: 100%;height: 100%;border-radius: 50%;" />
			</div>
			<div v-if="UserInfo">
				<span class="name" style="color: #fff;">{{ UserInfo.UserInfo.RealName }}</span>
				<br />
				<u-tag :text="UserInfo.UserInfo.UserName ?'用户名: ' + UserInfo.UserInfo.UserName :''" mode="plain"
					type="primary" />
			</div>
			<div v-else>
				<span class="name"></span>
				<br />
				<u-tag :text="'性别: '" mode="plain" type="primary" />
			</div>
		</div>
		<div class="list">
			<div @click="link(item)" class="row" :class="{ group: item.group }" v-for="(item, index) in list"
				:key="index">
				<div class="text flex Acenter">
					<!-- <uni-icons :class="item.icon" style="margin-right: 5px;"></uni-icons> -->
					<image v-if="index==0" src="../../assets/iconfont1.png" style="width: 50rpx;height: 50rpx;"></image>
					<image v-if="index==1" src="../../assets/iconfont6.png"
						style="width: 45rpx;height: 40rpx;margin-right: 10rpx;"></image>
					<image v-if="index==2" src="../../assets/iconfont2.png"
						style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
					<image v-if="index==3" src="../../assets/iconfont4.png"
						style="width: 45rpx;height: 45rpx;margin-right: 10rpx;"></image>
					<image v-if="index==4" src="../../assets/iconfont3.png"
						style="width: 45rpx;height: 45rpx;margin-right: 10rpx;"></image>
					<!-- 	<image v-if="index==5" src="../../assets/peeling.png"
						style="width: 45rpx;height: 45rpx;margin-right: 10rpx;"></image> -->
					<image v-if="index==5" src="../../assets/iconfont5.png"
						style="width: 45rpx;height: 45rpx;margin-right: 10rpx;"></image>
					<text>{{ item.text }}</text>
				</div>
				<div>
					<uni-icons type="right" size="15"></uni-icons>
				</div>
			</div>
		</div>



		<uni-popup ref="popup" type="bottom" @closeMask="closeMask">
			<view style="padding: 10rpx;">
				<button @click="upclick('拍照')">拍照</button>
				<button style="margin-top: 10rpx;" @click="upclick('相册选取')">相册选取</button>
			</view>
		</uni-popup>
		<AuthCamera ref="AuthCamera" type="top" @changeAuthCamera="changeAuthCamera"
			:permissionID="permissionIDAuthCamera" />
		<AuthPhoto ref="AuthPhoto" type="top" @changeAuthPhoto="changeAuthPhoto"
			:permissionID="permissionIDAuthPhoto" />


		<!-- **************************iconfont图标引入示例************************** -->
		<!-- 	<view style="border: 2px solid red;">
			<uni-icons class="iconfont icon-wode" size="30"></uni-icons>
			<uni-icons class="iconfont icon-piciyangpin" size="30"></uni-icons>
		</view> -->
		<!-- 自定义底部导航栏组件 -->
		<pyh-tab ref="tabbar"></pyh-tab>
	</div>
</template>

<script>
	import {
		// 保存头像
		Base_UserUpdateDataByConditions,
		GetOperatorInfo
	} from "@/api/interface.js";
	import AuthCamera from "@/components/yk-authpup/AuthCamera.vue";
	import AuthPhoto from "@/components/yk-authpup/AuthPhoto.vue";
	import {
		mapMutations,
		mapState
	} from 'vuex'
	// 引入顶部navbar组件
	import HeaderImage from '@/components/header/header-image.vue'
	export default {
		components: {
			HeaderImage,
			AuthCamera,
			AuthPhoto
		},
		data() {
			return {
				permissionIDAuthCamera: "CAMERA",
				permissionIDAuthPhoto: 'READ_EXTERNAL_STORAGE',
				title: "../../assets/tg.png",
				userName: "",
				list: [{
						text: "我的",
						icon: '',
						path: "/pages/MySelf/MySelf",
						color: "#0ebf8f"
					},
					{
						text: "工单",
						icon: '',
						path: "/pages/myWorkOrder/myWorkOrder",
						color: "#FF9800",
					},
					{
						text: "联系人",
						icon: '',
						path: "/pages/record/record",
						color: "#e00b9c",
					},
					{
						text: "沟通",
						icon: '',
						path: "/pages/Cust_Communication/List",
						color: "#0ebf8f",
					},
					{
						text: "样品",
						icon: '',
						path: "/pages/service/sample",
						color: "#F44336",
					},
					// {
					// 	text: "主题皮肤",
					// 	icon: '',
					// 	path: "/pages/changeTheme/changeTheme",
					// 	color: "#F44336",
					// },
					{
						text: "安全退出",
						icon: '',
						path: "/pages/Login/Login",
						color: "#03A9F4",
						group: true,
					},
				],
				// 头像路径
				UserAvatarUrl: "",
			};
		},
		computed: {
			...mapState(["UserInfo", "DeptId", "bgColor"]),
		},
		onShow() {


			// let navigatorType = getNavigatorType()
			// if (navigatorType === 'Android') {
			// // 获取文档中的class="navBarCon"的元素
			//   document.querySelector('.navBarCon').style.paddingTop = '20px'
			// }
			// this.userName = this.$store.state.system.RealName;
		},
		methods: {
			...mapMutations(["logout"]),
			// /换肤
			changeTheme() {
				console.log('开始换肤了')
				uni.navigateTo({
					url: '/pages/changeTheme/changeTheme'
				})
			},
			// 相机权限使用说明子组件的方法
			changeAuthCamera() {

			},
			// 相册权限使用说明子组件的方法
			changeAuthPhoto() {

			},
			// 修改头像
			userAvatarChange() {
				console.log('修改头像')
				// 开始相册和拍照时  先隐藏底部导航栏  否则 
				// 隐藏默认底部导航栏
				// uni.hideTabBar()
				this.$refs.popup.open()
			},
			closeMask() {
				console.log('关闭弹窗了')
				// 加个延迟 否则会有底部导航栏和弹出遮罩层不融合过度的情况  为了融合过度效果
			},
			//拍照和相册选择
			upclick(type) {
				var that = this
				let sourceType = ""
				if (type === '拍照') {
					sourceType = "camera"
					setTimeout(() => {
						that.$refs['AuthCamera'].open();
					}, 500)
				} else {
					sourceType = "album"
					setTimeout(() => {
						that.$refs['AuthPhoto'].open();
					}, 500)
				}

				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [sourceType], //这要注意，camera掉拍照，album是打开手机相册
					success: (result) => {
						console.log('获取选中的图片结果--', result.tempFilePaths[0])
						uni.showLoading({
							title: '上传中..'
						})
						uni.uploadFile({
							url: this.$ActionUrl + '/Base_Manage/Base_User/UploadFileByForm',
							filePath: result.tempFilePaths[0],
							header: {
								'Authorization': 'Bearer' + ' ' + uni.getStorageSync('token')
							},
							name: 'file',
						}).then(resJson => {
							let [err, res] = [...resJson]
							// console.log('获取上传成功后的的结果', err, res)
							if (res.errMsg === 'uploadFile:ok') {
								let fileData = JSON.parse(res.data)
								if (fileData.url) {
									this.UserInfo.UserInfo.UserAvatarURL = fileData.url
									console.log('赋值后的url', this.UserInfo.UserInfo)
									// 保存头像
									this.setBase_UserUpdateDataByConditions()

									this.$forceUpdate()
									// 说明上传成功
									this.$sucessToast('已上传')
									uni.hideLoading()

								} else {

									this.$errorToast(fileData.Msg)
									uni.hideLoading()
								}
							}
							// if (err !== null) return uni.showToast({
							// 	icon: 'none',
							// 	title: '网络连接失败,请重试'
							// })
							// this.save(JSON.parse(res.data).Url)
						})
					}
				});
				that.$refs.popup.close()
			},
			// 保存头像
			setBase_UserUpdateDataByConditions() {
				Base_UserUpdateDataByConditions({
					Id: this.UserInfo.UserInfo.Id,
					Search: {
						Condition: "UserAvatarURL",
						Keyword: this.UserInfo.UserInfo.UserAvatarURL
					}
				}).then(resJson => {

					if (resJson.Success) {
						// 如果成功，重新存储用户信息
						// 存储用户信息
						this.GetOperatorInfoData()
						console.log(
							'存储成功this.UserInfo.UserInfothis.UserInfo.UserInfothis.UserInfo.UserInfo',
							this
							.UserInfo.UserInfo)
					}
				})
			},
			// 获取用户信息
			GetOperatorInfoData() {
				var that = this
				GetOperatorInfo().then(res => {
					if (res.Success) {
						// 重新存储用户信息
						this.$store.commit("getLoginUserInfo", res.Data)
					} else {
						that.loading = false
						this.$errorToast(res.Msg);
					}
				}).catch(err => {
					that.loading = false
					this.$errorToast(err);
				})
			},
			// 退出登录
			link(item) {
				console.log('退出了', item)
				if (item.text === '安全退出') {
					this.$utils.showConfirm({
						content: '确定要退出吗',
						confirmText: "退出",
						confirmColor: item.color
					}).then(res => {
						if (res.confirm) {
							// 清空用户信息退出
							this.logout()
							uni.redirectTo({
								url: '/pages/Login/Login',
							})
						} else {}
					})
					return
				}

				uni.navigateTo({
					url: item.path
				})

			},
		},
	};
</script>

<style lang="less" scoped>
	.user-info {
		background: #f5f5f5ee;
		height: 100%;
		width: 100%;

		.userNavbar {
			padding-left: 20px;
			display: flex;
			align-items: center;

			.navbar {
				display: flex;
				align-items: center;
				font-size: 14px;
				position: absolute;
			}
		}

		.group {
			margin-top: 15px;
		}
	}

	.navBarCon {
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 45px;
		margin: 10px auto;
	}

	// 
	.head {
		top: 0;
		position: fixed;
		background: #03a9f4;
		padding: 0.8rem;
		font-size: 1rem;
		color: white;
		width: 100%;
		z-index: 999;
	}

	.info {
		padding: 1rem;
		// background: #03a9f4;
		color: white;
		font-size: 16px;
		display: inline-block;
		width: 91%;

		>div {
			float: left;
		}

		>div:last-child {
			line-height: 2.2rem;
			margin-left: 2rem;
		}

		img {
			height: 70px;
			width: 70px;
			border-radius: 50%;
			margin-right: 0px;
			top: 4px;
			position: relative;

			border: 2px solid #eaeaea;
		}
	}

	.list {
		margin-top: 13px;
		width: 100%;
		display: inline-block;

		.row {
			background: white;
			cursor: pointer;
			// width: 100%;
			padding: 12px 19px;
			border-bottom: 1px solid #f3f3f3;
			display: flex;
			align-items: center;

			.text {
				font-size: 0.9rem;

				i {
					position: relative;
					font-size: 1.1rem;
					top: 4px;
					margin-right: 5px;
				}
			}

			>div:last-child {
				flex: 1;
				text-align: right;
				color: #e4e4e4;
				font-size: 13px;
				/* line-height: 24px; */
				padding-top: 3px;
			}
		}
	}
</style>

<style lang="less" scoped>
	.vol-index-title {
		// background: white;
		// border-bottom: 1px solid #eee;
		// line-height: 50px;
		// height: 50px;
		// padding-left: 1rem;
		// letter-spacing: 1px;
		display: flex;

		img {
			position: relative;
			height: 17px;
			top: 5px;
			margin-right: 0.5rem;
		}
	}
</style>